---
title: Authentification
description: Une introduction à l'authentification avec Astro
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

L'authentification et l'autorisation sont deux processus de sécurité qui gèrent l'accès à votre site web ou à votre application. L'authentification permet de vérifier l'identité d'un visiteur, tandis que l'autorisation permet d'accéder à des zones et des ressources protégées.

L'authentification vous permet de personnaliser les zones de votre site pour les personnes connectées et offre la meilleure protection pour les informations personnelles ou privées. Les bibliothèques d'authentification (par exemple [Lucia Auth](https://lucia-auth.com/), [Auth.js](https://authjs.dev/)) fournissent des utilitaires pour plusieurs méthodes d'authentification telles que la connexion par e-mail et les fournisseurs OAuth.

:::tip
Il n'y a pas de solution d'authentification officielle pour Astro, mais vous pouvez trouver [dans les intégrations de la communauté en recherchant "auth"](https://astro.build/integrations/?search=auth).
:::

<ReadMore>Voir comment [ajouter une authentification avec Supabase](/fr/guides/backend/supabase/#ajouter-les-informations-didentification-de-supabase) ou [ajouter une authentification avec Firebase](/fr/guides/backend/google-firebase/#ajouter-lauthentification-avec-firebase) dans nos guides dédiés à ces services backend.</ReadMore>

## Lucia

Lucia est une bibliothèque d'authentification spécialisée sur le framework, une bibliothèque d'authentification basée sur la session avec un excellent support Astro.

### Installation

Installez Lucia en utilisant le gestionnaire de paquets de votre choix.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```shell
    npm install lucia
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```shell
    pnpm add lucia
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```shell
    yarn add lucia
    ```
  </Fragment>
</PackageManagerTabs>

### Configuration

Utilisez le guide ["Démarrer avec Astro"](https://lucia-auth.com/getting-started/astro) pour initialiser Lucia avec un adaptateur et configurer une base de données pour stocker les utilisateurs et les sessions.

### Utilisation

:::tip
Suivez l'un des tutoriels Astro complets de Lucia pour ajouter [l'authentification par nom d'utilisateur et mot de passe](https://lucia-auth.com/tutorials/username-and-password/astro) ou [GitHub OAuth](https://lucia-auth.com/tutorials/username-and-password/astro) à votre projet Astro.
:::

### Prochaines étapes

- [Exemple Astro + Projet OAuth Lucia](https://github.com/lucia-auth/examples/tree/main/astro/github-oauth)
- [Exemple Astro + Projet de nom d'utilisateur et de mot de passe Lucia](https://github.com/lucia-auth/examples/tree/main/astro/username-and-password)

## Auth.js

Auth.js est une solution d'authentification indépendante du framework. Un adaptateur de framework communautaire [`auth-astro`](https://www.npmjs.com/package/auth-astro) est disponible pour Astro.

### Installation

Utilisez la commande `astro add` de votre gestionnaire de paquets préféré pour ajouter l'intégration `auth-astro`.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```shell
    npx astro add auth-astro
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```shell
    pnpm astro add auth-astro
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```shell
    yarn astro add auth-astro
    ```
  </Fragment>
</PackageManagerTabs>

#### Installation manuelle

Pour installer `auth-astro` manuellement, installez le paquet requis pour votre gestionnaire de paquets :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```shell
    npm install auth-astro
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```shell
    pnpm add auth-astro @auth/core
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```shell
    yarn add auth-astro
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```ts title="astro.config.mjs" ins={2,6}
import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});
```

### Configuration

Créez un fichier `auth.config.mjs` dans le répertoire racine de votre projet. Ajoutez tous les [providers](https://authjs.dev/getting-started/providers) ou méthodes d'authentification que vous souhaitez supporter, ainsi que toutes les variables d'environnement qu'ils requièrent.

```ts title="auth.config.mjs"
import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';

export default defineConfig({
	providers: [
		GitHub({
			clientId: import.meta.env.GITHUB_CLIENT_ID,
			clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
		}),
	],
});
```

Créez un fichier `.env` à la racine de votre projet s'il n'existe pas déjà. Ajoutez les deux variables d'environnement suivantes. `AUTH_SECRET` doit être une chaîne privée avec un minimum de 32 caractères.

```sh title=".env"
AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>
```

### Utilisation

Vous pouvez ajouter des boutons de connexion et de déconnexion en utilisant le module `auth-astro/client` dans une balise de script ou un composant de framework côté client.

```astro title="src/pages/index.astro" {9}
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Se connecter</button>
  <button id="logout">Se déconnecter</button>

  <script>
    const { signIn, signOut } = await import("auth-astro/client")
    document.querySelector("#login").onclick = () => signIn("github")
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>
```

Vous pouvez récupérer la session de l'utilisateur en utilisant la méthode `getSession`.

```astro title="src/pages/index.astro" {3,5}
---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';

const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>Bienvenue {session.user?.name}</p>
    ) : (
      <p>Non connecté</p>
    )
  }
</Layout>
```

### Prochaines étapes

- [`auth-astro` sur GitHub](https://github.com/nowaythatworked/auth-astro?tab=readme-ov-file#auth-astro)
- [Documentation Auth.js](https://authjs.dev/)
